function Page(option) {
    this.ele = document.querySelector(option.ele);
    this.ele.className = "page";
    this.data = option.data;//表示所有的数据
    this.pageIndex = 1;//默认选中的是第一页
    this.methods = option.methods;//所以回调的方法
    this.create();
    this.bindData();
}

Page.prototype.bindData = function () {//绑定数据

    let that = this;
    this.allpage = Math.ceil(this.data.total / this.data.shownum);

    let start = 1;

    //假如 总数是101 每页显示10条  总页码是11  11>5         显示1到5页
    //     总数是11  每页显示10条  总页码是2   2>5 不成立   显示1到2
    let end = this.allpage > this.data.showpage ? this.data.showpage : this.allpage;

    //开头和结尾
    //当pageIndex小于3      显示    1  2  3  4  5
    //当pangeIndex大于3     显示    2  3  4  5  6

    //当页码在中间的时候 中间页 = 每页显示的条数 / 2 再向上取整
    this.middleNum = Math.ceil(this.data.showpage / 2);//5/2  中间数据为3
    if (this.pageIndex > this.middleNum) {
        start = this.pageIndex - this.middleNum + 1 //4-3+1
        end = this.pageIndex + this.middleNum - 1; //4+3-1 
    }

    //当页码在末尾的时候 
    if (this.pageIndex > this.allpage - this.middleNum) {
        start = this.allpage - this.data.showpage + 1;
        end = this.allpage;
    }

    start = start > 1 ? start : 1; //开头处理，如果总数小于每页显示的数时


    //动态生成数据
    this.content.innerHTML = ""; //每次生成新的之前先将旧的清空
    for (let i = start; i <= end; i++) {
        let item = document.createElement("div");
        if (this.pageIndex == i) {
            item.className = "item active";
        } else {
            item.className = "item";
        }

        item.innerHTML = i;

        item.onclick = function() {//点击后改变pageIndex,重新生成
            that.pageIndex = i;
            that.bindData();
        }
        this.content.appendChild(item);

    }

    //做一个事件绑定的判断  最开始都不能点击
    this.prevBtn.disabled = true;
    this.nextBtn.disabled = true;
    this.nextBtn.onclick = null;
    this.prevBtn.onclick = null;

    //每次生成之后判断
    if (this.pageIndex != this.allpage) { //如果页标不等于最后一页

        this.nextBtn.disabled = false;
        this.nextBtn.onclick = function () { //下一页
            that.pageIndex++;
            that.bindData();
        }
    }

    if (this.pageIndex != 1) {//如果页标不等于第一页

        this.prevBtn.disabled = false;
        this.prevBtn.onclick = function () { //上一页
            that.pageIndex--;
            that.bindData();
        }
    }

    //如果有回调函数，则调用cb
    if(this.methods.cb) {
        this.methods.cb(this.pageIndex);
    }

}

Page.prototype.create = function () { //生成结构

    this.prevBtn = document.createElement("button");
    this.prevBtn.innerHTML = "上一页";
    this.ele.appendChild(this.prevBtn);

    this.content = document.createElement("div");
    this.content.className = "content";
    this.ele.appendChild(this.content);

    this.nextBtn = document.createElement("button");
    this.nextBtn.innerHTML = "下一页";
    this.ele.appendChild(this.nextBtn);

}